<style lang="less">
    td.ivu-table-expanded-cell{
        background: #ffffff;
    }
    .tableDiv{
         .ivu-table-header{
            display: none;
        }
         .ivu-table td, .ivu-table th{
            border-bottom: none;
        }
         .ivu-table-wrapper{
            border:none;
        }
        .ivu-table:after, .ivu-table:before{
            background-color:transparent!important;
        }
    }

</style>
<template>
    <div class="tableDiv">
        <Table :columns="columns7" :data="row.list" class="tableDiv_table"></Table>
        <Modal :draggable="true"
            v-model="modal10"
            title="编辑权限2"
            :mask-closable="false">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                    <FormItem label="名称" prop="name">
                        <Input v-model="formValidate.name" placeholder="请输入名称"></Input>
                    </FormItem>
                    <FormItem label="类型" prop="type">
                        <Select v-model="formValidate.type" placeholder="请选择类型" disabled>
                            <Option value="MENU">菜单</Option>
                            <Option value="BUTTON">按钮</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="图标样式" v-if="formValidate.type === 'MENU'">
                        <Select v-model="formValidate.icon" placeholder="请选择图标样式">
                            <Option :value="item.value" v-for="(item,index) in iconList" :key="index">
                                <Icon :type="item.value" style="margin-right:20px;"></Icon>
                                {{ item.label }}
                            </Option>
                        </Select>
                    </FormItem>
                    <FormItem label="链接" prop="link">
                        <Input v-model="formValidate.link" placeholder="请输入链接"></Input>
                    </FormItem>
                    <FormItem label="排序">
                        <Input-number :min="1" :step="1" v-model="formValidate.sort" placeholder="请输入排序"></Input-number>
                    </FormItem>
                    
                    <FormItem label="状态" prop="isActive">
                        <Select v-model="formValidate.isActive" placeholder="请选择状态">
                            <Option value="true">启用</Option>
                            <Option value="false">禁用</Option>
                        </Select>
                    </FormItem>
                </Form>
            <div slot="footer">
                <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    export default {
        props: {
            row: Object
        },
        data () {
            return {
                columns7: [
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            depot.get({
                                                url: 'user/resource/findById?id=' + params.row.id,
                                                cb: (data) => {
                                                    if (data.code === 0) {
                                                        this.edit(params.row.id);
                                                    } else {
                                                        this.$Message.error(data.message);
                                                    }
                                                }
                                            });
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.row.id);
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    },
                    {
                        title: '名称',
                        align: 'left',
                        key: 'name',
                        width: 200
                    },
                    {
                        title: '图标样式名',
                        key: 'icon',
                        width: 300,
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: params.row.icon
                                    }
                                }),
                                h('strong', params.row.icon)
                            ]);
                        }
                    },
                    {
                        title: '链接地址',
                        align: 'center',
                        width: 300,
                        key: 'link'
                    },
                    {
                        title: '状态',
                        align: 'center',
                        width: 300,
                        key: 'isActive'
                    }
                ],
                data6: [],
                modal10: false,
                formValidate: {
                    name: '',
                    type: 'MENU',
                    link: '',
                    sort: 1,
                    isActive: '',
                    icon: ''
                },
                dataList: {},
                ruleValidate: {
                    name: [
                        { required: true, message: '名称不能为空', trigger: 'blur' }
                    ],
                    link: [
                        { required: true, message: '链接不能为空', trigger: 'blur' }
                    ],
                    type: [
                        { required: true, message: '请选择类型', trigger: 'change' }
                    ],
                    isActive: [
                        { required: true, message: '请选择状态', trigger: 'change' }
                    ]
                },
                iconList: [
                    {
                        label: 'android-people',
                        value: 'android-people'
                    },
                    {
                        label: 'android-settings',
                        value: 'android-settings'
                    },
                    {
                        label: 'android-contact',
                        value: 'android-contact'
                    },
                    {
                        label: 'android-mail',
                        value: 'android-mail'
                    },
                    {
                        label: 'android-send',
                        value: 'android-send'
                    },
                    {
                        label: 'android-delete',
                        value: 'android-delete'
                    },
                    {
                        label: 'android-globe',
                        value: 'android-globe'
                    },
                    {
                        label: 'android-chat',
                        value: 'android-chat'
                    },
                    {
                        label: 'android-desktop',
                        value: 'android-desktop'
                    },
                    {
                        label: 'android-cloud-outline',
                        value: 'android-cloud-outline'
                    },
                    {
                        label: 'android-cloud',
                        value: 'android-cloud'
                    },
                    {
                        label: 'android-download',
                        value: 'android-download'
                    },
                    {
                        label: 'android-upload',
                        value: 'android-upload'
                    },
                    {
                        label: 'android-image',
                        value: 'android-image'
                    },
                    {
                        label: 'android-microphone',
                        value: 'android-microphone'
                    },
                    {
                        label: 'android-favorite',
                        value: 'android-favorite'
                    },
                    {
                        label: 'android-cart',
                        value: 'android-cart'
                    },
                    {
                        label: 'ionic',
                        value: 'ionic'
                    }
                ]
            };
        },
        methods: {
            remove (id) {
                let ids = [id];
                depot.post({
                    url: 'user/resource/deleteResource',
                    data: ids,
                    cb: (data) => {
                        if (data.code === 0) {
                            this.$Message.success('删除成功');
                            setTimeout(() => {
                                location.reload();
                            }, 1000);
                        } else {
                            this.$Message.error(data.message);
                        }
                    }
                });
            },
            edit (id) {
                depot.get({
                    url: 'user/resource/findById?id=' + id,
                    cb: (data) => {
                        if (data.code === 0) {
                            console.log(data.data);
                            this.modal10 = true;
                            this.dataList = data.data;
                            this.formValidate.parentId = data.data.id;
                            this.formValidate.name = data.data.name;
                            this.formValidate.link = data.data.link;
                            this.formValidate.sort = data.data.sort;
                            this.formValidate.isActive = data.data.isActive === true ? 'true' : 'false';
                            this.formValidate.icon = data.data.icon;
                        } else {
                            this.$Message.error(data.message);
                        }
                    }
                });
            },
            // 确认增加
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if (this.formValidate.icon !== '') {
                            if (this.formValidate.type === 'MENU') {
                                this.dataList.name = this.formValidate.name;
                                this.dataList.link = this.formValidate.link;
                                this.dataList.sort = this.formValidate.sort;
                                this.dataList.isActive = this.formValidate.isActive;
                                this.dataList.icon = this.formValidate.icon;
                                depot.post({
                                    url: 'user/resource/updateResource',
                                    data: this.dataList,
                                    cb: (data) => {
                                        if (data.code === 0) {
                                            this.$Message.success('编辑成功');
                                            setTimeout(() => {
                                                location.reload();
                                            }, 500);
                                        } else {
                                            this.$Message.error(data.message);
                                        }
                                    }
                                });
                            } else {
                                this.$Message.error('按钮功能没做');
                            }
                        } else {
                            this.$Message.error('请选择图标样式');
                        }
                    } else {
                        this.$Message.error('Fail!');
                    }
                });
            }
        }
    };
</script>